@import "@/styles/variables.module.less";
@SearchHeight: 55px;
@SearchItemGap: 10px;

.flow-table-container {
  user-select: none;
  height: calc(100vh - @AppHeaderHeight - @AppBreadcrumbHeight);
  margin: 0 @LayoutGap;
  padding: 0 @Gap;
  background: #fff;
  border-radius: @BorderRadius;
  user-select: none;
  
  
  .search-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: @SearchItemGap;
    height: @SearchHeight;
    button {
      + button {
        margin-left: 10px;
      }
    }

    .search-list {
      display: flex;
      align-items: center;

      .search-segment + .search-segment {
        margin-left: 4px;
      }
    }

    .arco-btn {
      padding: 0;
      width: 32px;
    }

    .btns-list {
      display: flex;
      flex-flow: row nowrap;
      gap: @SearchItemGap;
    }
    button {
      + button {
        margin-left: 10px;
      }
    }
  }

  .flow-table-main {
    height: calc(100vh - @AppHeaderHeight - @AppBreadcrumbHeight - @SearchHeight);

    border-top: 1px solid var(--color-neutral-3);

    .flow-table-content {
      margin-top: 12px;
    }
  }
}